<template>
	<div class="helpcureMain">
		<div>
			<h2>疾病辅助诊断</h2>
		</div>
		<div class="allChats" :style="{'max-height': this.timeLineHeight + 'px' }" style="overflow-y:scroll;">
			<div v-if="chatboxs && chatboxs.length > 0">
				<chat-box v-for="chatbox in chatboxs" :chatboxMsg="chatbox" :key="chatbox">
				</chat-box>
			</div>
			<div v-else-if="chatboxs">请在下方输入框输入您要咨询的问题</div>
		</div>

		<div class="downInputAbout">
			<div class="insideBox">
				<el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="textarea" style="font: 16px">
				</el-input>
				<el-button @click="addUserMessage()" @keyup.enter="enteraddUserMsg()">发 送</el-button>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		param
	} from 'jquery';
	import chatBox from '../views/ChatBox.vue'
	export default {
		components: {
			chatBox
		},
		created() {

		},
		data() {
			return {
				chatboxs: [],
				textarea: '',
				timeLineHeight: ""
			}
		},
		mounted() {
			document.title="辅助诊断"
			this.timeLineHeight = document.documentElement.clientHeight - 200;
			window.onresize = () => {
				this.timeLineHeight = document.documentElement.clientHeight - 200;
			};
		},
		methods: {
			addUserMessage() {
				const _this = this;
				var params = new URLSearchParams();
				const userMsg = _this.textarea;
				if (userMsg == "") {
					alert("请输入您的问题!");
				} else {
					//这里要向后端发请求的
					params.append('question', userMsg);
					_this.chatboxs.push("用户问题::" + userMsg); //+ this.chatboxs.length
					this.$http.post('/disease/helpcure', params).then(function(resp) {
						if (resp.data.data != null) {
							const respAnswer = resp.data.data;
							_this.addBotMessage(respAnswer);
						}
					})
				}

				// _this.addBotMessage(userMsg);
				_this.textarea = '';
			},
			addBotMessage(UserMessage) {
				const _this = this;
				const botAnswer = UserMessage; //暂时
				_this.chatboxs.push(botAnswer);
			},
			enteraddUserMsg() {
				const _this = this;
				document.onkeydown = e => {
					//13表示回车键，baseURI是当前页面的地址，为了更严谨，也可以加别的，可以打印e看一下
					if (e.keyCode === 13) {
						//回车后执行搜索方法
						_this.addUserMessage();
					}
				}
			}
		}
	}
</script>

<style>
	.downInputAbout {
		display: flex;
		flex-wrap: nowrap;
		justify-content: center;
		flex-direction: row;
		align-items: center;
	}

	.insideBox {
		display: flex;
		align-items: center;
		position: fixed;
		/* position: absolute; */
		bottom: 10px;
		margin: 0 15px;
		padding-right: 15px;
		padding-left: 15px;
		width: calc(100% - 30px);
		height: 60px;
		border: 1px solid #55aa7f;
	}

	.insideBox textarea {
		resize: none;
		font-size: 15px;
		overflow-y: auto;
		border: none;
		box-shadow: none;
	}

	.insideBox button {
		font-size: 20px;
		width: 120px;
		height: 50px;
		background-color: #89da95;
	}

	.insideBox textarea:focus {
		border: none !important;
		box-shadow: none !important;
	}
</style>
